<template>
  <view class="bg-white radius padding margin-top-sm flex align-center justify-between margin-lr"
    v-for="item in studentList" :key="item.id" @click="handleStudentClick(item)">
    <u-text :text="item.name" size="32rpx" color="#333"></u-text>
    <u-text :text="getStatusText(item.status)" size="24rpx" :color="getColor(item.status)"></u-text>
    <u-icon name="arrow-right" color="#999" size="16"></u-icon>
  </view>
</template>
<script setup>
import { ref } from 'vue';

const props = defineProps({
  classType: {
    type: Number,
    default: 1
  }
})

const studentList = ref([
  {
    id: 1,
    name: '张三',
    status: 1,//1:已签到 2:已签退 3:已请假 4:已早退 5:已补签 6:未签到
  },
  {
    id: 2,
    name: '李四',
    status: 2,//1:已签到 2:已签退 3:已请假 4:已早退 5:已补签 6:未签到
  },
  {
    id: 3,
    name: '王五',
    status: 3,//1:已签到 2:已签退 3:已请假 4:已早退 5:已补签 6:未签到
  },
  {
    id: 4,
    name: '赵六',
    status: 4,//1:已签到 2:已签退 3:已请假 4:已早退 5:已补签 6:未签到
  },
  {
    id: 5,
    name: '孙七',
    status: 5,//1:已签到 2:已签退 3:已请假 4:已早退 5:已补签 6:未签到
  },
  {
    id: 6,
    name: '周八',
    status: 6,//1:已签到 2:已签退 3:已请假 4:已早退 5:已补签 6:未签到
  }
])

const getStatusText = (status) => {
  switch (status) {
    case 1:
      return '已签到';
    case 2:
      return '已签退';
    case 3:
      return '已请假';
    case 4:
      return '已早退';
    case 5:
      return '已补签';
    case 6:
      return '未签到';
    default:
      return '';
  }
}

const getColor = (status) => {
  switch (status) {
    case 1:
    case 5:
      return '#0060E6';
    case 2:
      return '#FFA40C';
    case 3:
    case 4:
      return '#666';
    case 6:
      return '#FF5252';
    default:
      return '#999';
  }
}

const handleStudentClick = (item) => {
  console.log('item', item, props.classType)
  uni.navigateTo({
    url: `/pages/teacher/classroom/studentInfo?id=${item.id}&classType=${props.classType}`
  })
}
</script>